<template>
  <page>
    <template v-slot:header>
      <h2>
        <span class="icon iconfont">&#xe607;</span>
        <span>{{ $t("configure.normal_library") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <p>{{ $t("configure.normal_library_table_description") }}</p>
      <ky-table
        :getData="getStandardLib"
        ref="table"
        :search_data="search_data"
      >
        <template v-slot:table>
          <el-table-column :label="$t('name')">
            <template slot-scope="scope">
              <router-link :to="$route.path + scope.row.id">
                {{ scope.row.name }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="version" :label="$t('system.version')">
          </el-table-column>
          <el-table-column prop="cpuArch" :label="$t('system.architecture')">
          </el-table-column>
          <el-table-column prop="createdAt" :label="$t('create_time')">
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getStandardLib, getStandardLibNameVersion } from "@/api/config";
import { noop } from "@/utils";
export default {
  name: "normal_library_index",
  components: {
    Page,
    kyTable,
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      search_data: {
        name: {
          name: "name",
          type: "select",
          items: [],
          watch: noop,
          func: this.getNameVersion,
        },
        version: {
          name: "system.version",
          type: "select",
          items: [],
        },
        cpuArch: {
          name: "system.architecture",
          type: "select",
          items: [
            {
              key: "aarch64",
              name: "aarch64",
            },
            {
              key: "x86_64",
              name: "x86_64",
            },
          ],
        },
        createdAt: {
          name: "create_time",
          type: "date",
        },
      },
    };
  },
  methods: {
    getStandardLib,
    getNameVersion() {
      getStandardLibNameVersion().then((res) => {
        let data = res.data.data;
        let keys = Object.keys(data);
        let NameItems = [];
        let versions = [];
        keys.forEach((key) => {
          NameItems.push({ key, name: key });
          data[key].forEach((ver) => {
            versions.push({
              key: ver,
              name: ver,
            });
          });
        });
        this.search_data.name.items = NameItems;
        this.search_data.version.items = versions;
        let _this = this;
        this.search_data.name.watch = function (value) {
          this.form.version = "";
          if (value) {
            let arr = [];
            data[value].forEach((ver) => {
              arr.push({
                key: ver,
                name: ver,
              });
            });
            _this.search_data.version.items = arr;
          } else {
            _this.search_data.version.items = versions;
          }
        };
      });
    },
  },
};
</script>

<style>
</style>